<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-item" :class="{ active: activeTab === item }" @click="switchTab(item)"
				v-for="(item,index) in statusOptions">
				{{item}}
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y="true" refresher-enabled="true" @refresherrefresh="onRefresh">
			<view class="order-item" v-for="order in orderList" :key="order.id">
				<!-- 订单头部 -->
				<view class="order-header">
					<view class="order-number">
						<text class="order-icon">📋</text>
						<text class="order-id">{{ order.order_no }}</text>
					</view>
					<view class="order-status" :class="order.status=='已完成'?'completed':'refund'">
						{{ order.status }}
					</view>
				</view>

				<!-- 订单内容 -->
				<view class="order-content">
					<view class="order-info">
						<text class="order-label">昵称：</text>
						<text class="order-value">{{ order.nickname }}</text>
					</view>
					<view class="order-info">
						<text class="order-label">已统取：</text>
						<text class="order-value">{{ order.leftCount }}/{{ order.total }}份</text>
					</view>
				</view>

				<!-- 订单操作 -->
				<view class="order-actions">
					<button class="detail-btn" @click="viewDetail(order)">
						查看详情
					</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="orderList.length === 0">
				<text class="empty-text">暂无订单</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				statusOptions: ['全部', '待配送', '待付款', '待收货', '已完成', '退款/售后'],
				activeTab: '全部',
				orderList: [],
				allOrders: []
			}
		},

		onShow() {
			const that = this
			uni.getStorage({
				key: 'item',
				success: function(res) {
					that.switchTab(res.data.name ? res.data.name : res.data)
					console.log(res.data);
				},
				fail(e) {
					this.getData('全部')
					console.log(e);
				}
			});

			console.log('?????');

		},
		methods: {
			async getData(name) {
				console.log(name, 'name');
				request({
					url: '/api/order/list',
					method: 'GET',
					data: {
						page: 1,
						pageSize: 10,
						status: name
					}
				}).then(res => {
					this.orderList = res.data
					console.log('订单数据:', res);
				}).catch(err => {
					console.error('请求出错:', err);
				});
			},
			switchTab(tab) {
				this.activeTab = tab;
				// this.filterOrders();
				this.getData(tab)
			},
			filterOrders() {
				switch (this.activeTab) {
					case 'all':
						this.orderList = this.allOrders;
						break;
					case 'pending':
						this.orderList = this.allOrders.filter(order => order.status === '待付款');
						break;
					case 'completed':
						this.orderList = this.allOrders.filter(order => order.status === '已完成');
						break;
					case 'refund':
						this.orderList = this.allOrders.filter(order => order.status === '退款' || order.status === '售后');
						break;
					default:
						this.orderList = this.allOrders;
				}
			},
			viewDetail(order) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${order.id}`
				});
			},
			onRefresh() {
				// 下拉刷新逻辑
				setTimeout(() => {
					this.loadOrders();
					uni.stopPullDownRefresh();
				}, 1000);
			},
			loadOrders() {
				// 加载订单数据的逻辑
				console.log('加载订单数据');
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.navbar {
		display: flex;
		background-color: #fff;
		border-bottom: 1px solid #e0e0e0;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-item {
		flex: 1;
		text-align: center;
		padding: 30rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
	}

	.nav-item.active {
		color: #48246B;
		font-weight: 500;
	}

	.nav-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 4rpx;
		background-color: #48246B;
		border-radius: 2rpx;
	}

	.order-list {
		height: calc(100vh - 120rpx);
		padding: 20rpx;
		width: 710rpx;
	}

	.order-item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.order-number {
		display: flex;
		align-items: center;
	}

	.order-icon {
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.order-id {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.order-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
	}

	.order-status.completed {
		background-color: #e8f5e8;
		color: #52c41a;
	}

	.order-status.pending {
		background-color: #fff7e6;
		color: #fa8c16;
	}

	.order-status.refund {
		background-color: #fff2f0;
		color: #ff4d4f;
	}

	.order-content {
		margin-bottom: 30rpx;
	}

	.order-info {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.order-info:last-child {
		margin-bottom: 0;
	}

	.order-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	.order-value {
		font-size: 28rpx;
		color: #333;
	}

	.order-actions {
		display: flex;
		justify-content: flex-end;
	}

	.detail-btn {
		background-color: transparent;
		border: 2rpx solid #48246B;
		color: #48246B;
		padding: 16rpx 32rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		line-height: 1;
	}

	.detail-btn:active {
		background-color: #f0f8ff;
	}

	.empty-state {
		text-align: center;
		padding: 100rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	/* 按钮重置样式 */
	button {
		margin: 0;
		padding: 0;
		border: none;
		background: none;
		font-size: inherit;
		line-height: inherit;
	}

	button::after {
		border: none;
	}
</style>